import { Button, Space, Dropdown, Menu, Modal } from 'ant-design-vue';
import {
  DownOutlined,
  MenuOutlined,
  DatabaseOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';

export default defineComponent({
  props: {
    record: {
      type: Object,
      default: () => {
        return {};
      }
    },
    editCall: {
      type: Function,
      default: () => {}
    },
    deleteCall: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['edit', 'delete', 'authMenu', 'authData'],
  setup(props, { emit }) {
    const handleEdit = (_arg: any) => {
      emit('edit', props.record);
    };
    const handleDelete = (_arg: any) => {
      Modal.confirm({
        title: '确定要删除数据？',
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          emit('delete', props.record);
        }
      });
    };
    const handleAuthMenu = (_arg: any) => {
      emit('authMenu', props.record);
    };
    const handleAuthData = (_arg: any) => {
      emit('authData', props.record);
    };

    return {
      handleEdit,
      handleDelete,
      handleAuthMenu,
      handleAuthData
    };
  },
  render() {
    return (
      <Space>
        <Button
          v-permission={'sysRole:update'}
          type="dashed"
          onClick={this.handleEdit}
        >
          编辑
        </Button>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key="1" onClick={this.handleAuthMenu}>
                <MenuOutlined />
                授权菜单
              </Menu.Item>
              <Menu.Item key="2" onClick={this.handleAuthData}>
                <DatabaseOutlined />
                授权数据
              </Menu.Item>
              <Menu.Item
                key="3"
                danger
                v-permission={'sysRole:delete'}
                onClick={this.handleDelete}
              >
                <DeleteOutlined />
                删除
              </Menu.Item>
            </Menu>
          }
        >
          <Button type="dashed">
            更多
            <DownOutlined />
          </Button>
        </Dropdown>
      </Space>
    );
  }
});
